<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="city">
    <option value="1">请选择</option>
</select>
</body>
<script>
    const data = [1,2,3,4,5];
    const city = document.querySelector("select[name=city]");
    // 1
    // city.innerHTML += "<option value='1'>1</option>";
    // city.innerHTML += "<option value='2'>2</option>";
    // city.innerHTML += "<option value='3'>3</option>";
    // city.innerHTML += "<option value='4'>4</option>";
    // city.innerHTML += "<option value='5'>5</option>";

    // 2
    // city.innerHTML += [
    //     "<option value='1'>1</option>",
    //     "<option value='2'>2</option>",
    //     "<option value='3'>3</option>",
    //     "<option value='4'>4</option>",
    //     "<option value='5'>5</option>"
    // ].join("");

    // 3
    // console.log(data);// [1,2,3,4,5]
    // console.log(data.map(item=>100));// [100,100,100,100,100]
    // console.log(data.map(item=>(`
    //     <option value="${item}">${item}</option>
    // `)));// [<option value=1>1</option>,<option></option>,<option></option>,<option></option>,<option></option>]

    // city.innerHTML += data.map(item=>(`
    //     <option value="${item}">${item}</option>
    // `)).join("")

    // 4
    // document.createElement("div");// 创建一个名字为div标签
    // const option = document.createElement("option");// 创建一个名字为option标签
    // option.innerText=1;
    // option.value = 1;
    // city.appendChild(option);// 追加
    //
    // city.querySelectorAll("option").forEach(item=>{
    //     city.removeChild(item);
    // })

    // 5
    data.forEach(item=>{
        const option = document.createElement("option");
        // option.innerText = item;
        // option.value = item;

        option.innerText = option.value = item;
        city.appendChild(option);
    })

</script>
</html>